<html>
    <head>
        <title>按钮开关效果</title>
        <meta charset="utf-8"/>
        <style>
            body{
                margin: 0;
                padding: 0;
                background: #f3f3f3;
            }
            .center{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            input[type="checkbox"]{
                position: relative;
                width: 80px;
                height: 40px;
                -webkit-appearance: none;
                background: #c6c6c6;
                outline: none;
                border-radius: 20px;
                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) ;
            }
            input[type="checkbox"]:checked{
                background: #03a9f4;
                transition: 0.5s;
            }
            input[type="checkbox"]:before{
                content: '';
                position: absolute;
                width: 40px;
                height: 40px;
                top: 0;
                left: 0;
                border-radius: 50%;
                background: #fff;
                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                transform: scale(1.1);
                transition: 0.5s;
            }
            input[type="checkbox"]:checked::before{
                left: 40px;
            }
        </style>
    </head>
    <body>
        <div class="center">
            <input type="checkbox"/>
        </div>
    </body>
</html>